import React, { useState, useEffect, useRef } from 'react'
import { Button, Modal, Skeleton, Form, Empty } from 'antd'
import { getDataRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import Text from '@src/components/Text'
import style from './index.module.less'

const { Item } = Form

async function initData (id, setData, setLoading) {
  setLoading(true)
  const [e, d] = await awaitWrap(getDataRequest(id))
  setLoading(false)
  if (e === null && d !== null) {
    setData(d)
  }
}

function Main ({ visible = false, id = '', hide }) {
  const formRef = useRef(null)
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    if (typeof id === 'string' && id.length > 0 && visible) {
      initData(id, setData, setLoading)
    } else if (!visible) {
      setData(null)
    }
  }, [id, visible])
  useEffect(() => {
    const d = formRef.current
    if (d !== null) {
      if (data === null) {
        d.resetFields()
      } else {
        d.setFieldsValue(data)
      }
    }
  }, [data, formRef])
  return (
    <Modal open={visible} title='仲裁员详情' onCancel={hide} footer={<Button type='primary' onClick={() => hide()}>确定</Button>}>
      <Skeleton loading={loading} active>
        {
          data ? (
            <Form ref={formRef} className={style.form}>
              <Item name='name' label='姓名'><Text format={d => d || '无'} /></Item>
              <Item name='mobile' label='手机号'><Text format={d => d || '无'} /></Item>
              <Item name='tel' label='电话'><Text format={d => d || '无'} /></Item>
              <Item name='email' label='邮箱'><Text format={d => d || '无'} /></Item>
              {/* <Item name='structure' label='单位'><Text format={d => d || '无'} /></Item> */}
              <Item name='structure_tel' label='单位电话'><Text format={d => d || '无'} /></Item>
              {/* <Item name='academic_title' label='职称'><Text format={d => d || '无'} /></Item>
              <Item name='professional' label='专业'><Text format={d => d || '无'} /></Item>
              <Item name='special' label='专长'><Text format={d => d || '无'} /></Item> */}
            </Form>
          ) : (
            <Empty />
          )
        }
      </Skeleton>
    </Modal>
  )
}

export default Main
